<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>请在移动端打开</title>
    <style>
        /**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video, input {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-weight: normal;
            vertical-align: baseline;
        }

        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;
        }

        blockquote, q {
            quotes: none;
        }

        blockquote:before, blockquote:after,
        q:before, q:after {
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* custom */
        a {
            color: #7e8c8d;
            text-decoration: none;
            -webkit-backface-visibility: hidden;
        }

        li {
            list-style: none;
        }

        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-track-piece {
            background-color: rgba(0, 0, 0, 0.2);
            -webkit-border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            height: 5px;
            background-color: rgba(125, 125, 125, 0.7);
            -webkit-border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:horizontal {
            width: 5px;
            background-color: rgba(125, 125, 125, 0.7);
            -webkit-border-radius: 6px;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        input {
            outline: medium;
        }

        img {
            max-width: 100%;
        }

        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box; /* Firefox */
            -webkit-box-sizing: border-box; /* Safari */
        }
    </style>
    <style>
        /* 用户css */
        body {
            background: #171a3d;
            padding: 20px 20px 23px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        button {
            outline: none;
            border: none;
            height: 40px;
            font-size: 12px;
            color: #fff;
            border-radius: 4px;
            background: #13c1bf;
        }

        button:before {
            content: '';
            margin-right: 6px;
            display: inline-block;
            vertical-align: top;
            width: 12px;
            height: 12px;
            background: url(icons.png) no-repeat 0 0 / 63px 43px;
        }
        ul {
            background: #1e2148;
            border-radius: 4px;
        }
        ul li:not(:first-child){
            border-top: 1px solid #26294f;
        }
        .check-radio{
            padding: 0 16px 0 12px;
            height: 40px;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 10px;
        }
        .check-icon{
            margin-right: 10px;
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #292c51;
            border:2px solid #424565;
        }
        .active .check-icon{
            background: radial-gradient(white 0, white 40%, #12c1bf 41%, #12c1bf 100%);
            border:2px solid #73d0cf;
        }

        .pay-type {
            flex: 1;
        }
        .bg-image{
            width: 25px;
            height: 25px;
            background: url(icons.png) no-repeat -67px -30px / 125px 84px;
        }

        .operate .icon-delta{
            position: absolute;
            top: 0;
            left: 12px;
        }
        li .operate{
            position: relative;
            display: none;
            background: #242852;
        }
        li.active .operate {
            display: block;
        }
        .operate .operate-item {
            height: 35px;
            padding: 0 16px 0 12px;
            color: #9397c7;
            font-size: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .operate .operate-item section > *{
            display: inline-block;
        }
        .operate-item:not(:last-child){
            border-bottom: 1px solid #31355c;
        }
        input{
            margin-left: 13px;
            color: #fff;
            outline: none;
            background: transparent;
        }
        input.card{
            width: 150px;
        }
        input.expiry{
            width: 50px;
        }
        input.cvc{
            width: 30px;
        }
        .operate-item .icon-tip{
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            /**icon不想找了，用个i代替吧**/
            color: #15b0b3;
            border:1px solid #15b0b3;
            text-align: center;
            font-size: 6px;
            line-height: 10px;
        }
        .notice{
            font-size: 10px;
            color: #eee;
        }
    </style>
    <!--HMR热更新工具-->
    <!--<script src="live.js"></script>-->
</head>
<body>
<article>
    <ul>
        <li>
            <div class="check-radio">
                <span class="check-icon"></span>
                <p class="pay-type">PayPal</p>
                <p class="bg-image"></p>
            </div>
        </li>
        <li class="active">
            <div class="check-radio">
                <span class="check-icon"></span>
                <p class="pay-type">Debit/Credit Card</p>
                <p class="bg-image"></p>
            </div>
            <div class="operate">
                <span class="icon-delta"></span>
                <div class="operate-item">
                    <section class="input-warpper">
                        <p>Card number</p>
                        <input class="card" type="text" placeholder="请输入卡号" maxlength="22">
                    </section>
                </div>
                <div class="operate-item">
                    <section class="input-warpper">
                        <p>Expiry</p>
                        <input type="text" class="expiry" placeholder="MM/YY" maxlength="5">
                    </section>
                    <section class="input-warpper">
                        <p>CVC</p>
                        <input type="text" class="cvc" placeholder="123" maxlength="3">
                    </section>
                    <!--icon不想找了，用个i代替吧-->
                    <span class="icon-tip">i</span>
                </div>
            </div>
        </li>
    </ul>
</article>
<button>Finish and pay</button>
<script>
    // Dom hasClass方法，返回一个布尔值
    HTMLElement.prototype.hasClass = function(classValue) {
        return !!this.className.match( new RegExp( "(\\s|^)" + classValue + "(\\s|$)") )
    }
    HTMLElement.prototype.addClass = function(classValue) {
        if (classValue && !this.hasClass(classValue)) {
            this.className += ' ' + classValue;
        }
        // 实现链式调用
        return this
    }
    HTMLElement.prototype.removeClass = function (classValue) {
        if (classValue && this.hasClass(classValue)) {
            this.className = this.className.replace( new RegExp( "(\\s|^)" + classValue + "(\\s|$)" ), " " );
        }
        // 实现链式调用
        return this
    }
    // 重写closest，防止不兼容，从目标元素向上寻找符合的元素,事件代理可用
    HTMLElement.prototype.closest = function (sel) {
        var el = this
        var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
        while (el) {
            if (matchesSelector.call(el, sel)) {
                break
            }
            el = el.parentElement;
        }
        return el
    }
    // 封装一个选择器，便于操作dom
    window.$ = function (sel) {
        var elems = [].slice.call(document.querySelectorAll(sel));
        var len = elems.length;
        if (len === 1) {
            return elems[0]
        } else if (len === 0) {
            return null
        }
        return elems
    }
    window.addEventListener('load', function () {
        $('ul').addEventListener('click', function (e) {
            var target = e.target || e.srcElement;
            var elem = target.closest('li');
            var actNode = $('.active');
            if (elem !== actNode) {
                actNode.removeClass('active');
                elem.addClass('active');
            }
        })
        $('input.card').oninput = function (e) {
            var val = e.target.value.replace(/\s/g,'').replace(/(\w{4})(?=\w)/g,"$1  ")
            e.target.value = val
        }
        $('input.expiry').oninput = function (e) {
            console.log(e.target.value)
        }
    })
</script>
</body>
</html>
